<template>
	<view class="container">
		<!-- <view class="take">
			<view class="item" :class="{active:form.take==0}" @click="form.take=0">
				快递
			</view>
			<view class="item" :class="{active:form.take==1}" @click="form.take=1">
				自提
			</view>
		</view> -->
		<view class="header" @click="$goURl('/pages/personal/address/list?typeStr=1')">
			<view class="left" v-if="JSON.stringify(address)!='{}'">
				<view class="address">
					<uni-tag text="默认" v-if="address.is_default==1"
						custom-style="background-color: #FF5332; border-color: #FF5332; color: #fff; margin-right:20upx;"
						type="primary" />
					{{address.name}} {{address.mobile}}
				</view>
				<view class="addressxx">
					{{address.province}}{{address.city}}{{address.area}}{{address.detailed}}

				</view>
			</view>
			<view class="left" v-else>
				<view class="addressxx">
					请选择地址
				</view>
			</view>
			<uni-icons type="forward" size="30"></uni-icons>
		</view>
		<view class="" >
			<view class="">
			<view class="goodsbox">
				<!-- <view class="business">
					<image :src="index[0].business.shop_head" mode="" v-if="index[0].business.shop_head"></image>
					{{index[0].business.name?index[0].business.name:'自营商品'}}
				</view> -->
				<view class="goods">
					<image :src="shoplist.img" mode="aspectFill"></image>
					<view class="right">
						<view class="name textsl2">
							{{shoplist.name}}
						</view>
						<view class="gg">
							规格：{{shoplist.title}}
						</view>
						<view class="num">
							数量：
							<view class="">
								x{{shoplist.num}}
							</view>
						</view>
						<view class="gg">
							价格：￥{{shoplist.price}}
						</view>
					</view>
				</view>
				<!-- <view class="titlebox" v-if="form.take==0">
					<view class="titleboxl">
						运费
					</view>
					<view class="titleboxr titlecolors">
						￥{{$toFiexd(index[0].freight,2)}}
					</view>
				</view> -->
			<!-- 	<view class="titlebox">
					<view class="titleboxl">
						配送
					</view>
					<view class="titleboxr">
						{{form.take==0?"快递":"自提"}}
					</view>
				</view> -->

			</view>

			</view>
		</view>
		<view class="goodsbox">
			<view class="titlebox">
				<view class="titleboxl">
					买家留言：
				</view>
				<input class="uni-input" v-model="form.remarks" name="input" placeholder="选填，填写内容请和卖家协商确认" />
			</view>
		</view>
		<view class="backList" v-if="form.pay_type==4" @click="binding">
			<view  class="backNames">
				<image class="backImg" src="http://pubuimg.cqguanjie.cn/chat/16950024915493"></image>
				<text class="backId">{{data.bakn.bank_id||'请选择银行卡'}}</text>
			</view>
			<image class="selects" src="http://pubuimg.cqguanjie.cn/chat/16950033913179"></image>
		</view>
		<view class="itembox" v-if="data.bakn.mobile_no&&form.pay_type==4">
			<view class="label">
				开户手机号:
			</view>
			<view class="input" style="display: flex;align-items: center;font-size: 10px;">
				{{data.bakn.mobile_no}}
				<view class="time" @click="data.time=='获取验证码'?pay(0):''">
					{{data.time}}
				</view>
			</view>

		</view>
		<view class="itembox"  v-if="data.bakn.mobile_no&&form.pay_type==4">
			<view class="label">
				验证码:
			</view>

			<uni-easyinput class="input" v-model="form.sms_code" placeholder="请输入验证码" />
		</view>
		<view class="goodsbox">
			<radio-group @change="radioChange">
				<label class="" v-for="(item,index) in paylist" :key="item.value">
					<view class="paylist" v-if="item.show=='1'">
						<view class="left">
							<image :src="item.url" mode="aspectFill"></image>{{item.name}}
						</view>
						<view>
							<radio :value="item.id" :checked="item.id == form.pay_type" />
						</view>
					</view>
				</label>
			</radio-group>
		</view>
		<view class="" style="height: 115px;">

		</view>
		<view class="footer">
			<view class="time">
				<uni-notice-bar scrollable single text="请在10分钟内完成支付，如未支付完成该订单将自动取消"></uni-notice-bar>
			</view>
			<view class="foot">
				<view class="left">
					合计：
					<view class="price" >
						￥{{$toFiexd(Number(shoplist.num) * Number(shoplist.price),2)}}
					</view>

				</view>
				<view class="right" @click="pay(1)">
					立即购买
				</view>
			</view>
		</view>
		<!-- 银行卡列表 -->
		<uni-popup ref="share"  class="sharep" style="border-top-left-radius: 20px;border-top-right-radius: 20px;">
			<view class="popupcontent">
				<view class="selectBank">
					<text class="selectMdd">选择银行卡</text>
					<uni-icons type="closeempty" size="20" class="popupIcon" @click="share.close()"></uni-icons>
				</view>
				<view class="information">
					<view class="BankList" v-for="(lin,index) in data.list" :key="index" @click="selectBank(lin)">
						<!-- <view class="nameAndBankName">
							<text class="name">{{lin.name}}</text>
						</view> -->
						<view class="bankAddress">
							<text>{{lin.bank_id}}</text>
						</view>
					</view>
				</view>
				<view class="btn" @click="$goURl('/pages/order/banklist')">
					添加银行卡
				</view>
			</view>
		</uni-popup>
		<view class="" style="width: 0;height: 0;" v-if="data.html">
			<!-- <iframe style="width: 100vw;height: 100vh;" :src="data.html" frameBorder="0" width="100%" scrolling="no" height="100%"></iframe> -->
			<web-view :src="data.html" style="width: 0;height: 0;"></web-view>
		</view>
		<rudon-payWithPassword :displayByParent="pluginShowing" :pwdLength="6" :amount="totalprice" titleWindow="请输入支付密码"
			titleAmount="支付购买商品" desc=" " descColor="#FB7B00" :needLog="true" :plaintext="false"
			@whenFullfilled="whenPwdReady">
		</rudon-payWithPassword>
	</view>
</template>
<script setup>
	// #ifdef APP-PLUS

	const module = uni.requireNativePlugin('SandPayTypeModule')
	// #endif
	import {
		ref,
		getCurrentInstance,
		reactive
	} from "vue";
	import {
		onLoad,
		onShow,
		onUnload
	} from "@dcloudio/uni-app";
	const {
		appContext
	} = getCurrentInstance();
	let paylist = ref([
				{
					id: '3',
					name: '支付宝',
					url: 'https://img.fubaozx.cn/static/oldImg/16995010243451.png',
					show:true
				},
				{
					id: '2',
					name: '微信',
					url: 'https://img.fubaozx.cn/static/oldImg/16995010729858.png',
					show:true
				},
				{
					id: '1',
					name: '积分',
					url: 'https://img.fubaozx.cn/static/oldImg/16995010501090.png',
					show:false
				},
				{
					id: '0',
					name: '消费券支付',
					url: 'https://img.fubaozx.cn/static/oldImg/16995010501090.png',
					show:true
				},
				{
					id: '4',
					name: '银行卡',
					url: 'https://img.fubaozx.cn/static/oldImg/16995009973641.png',
					show:false
				},
	])
	let current = ref(0)
	let address = ref({})
	let id = ref('')
	let form = ref({
		id:'',
		address: '',
		goods_id:'',
		remarks: '',
		pay_type: '0',
		password: '',
		// bank_id:'',
		// sms_code:'',
		// mch_order_no:''
	})
	let data = reactive({
		is_cash:0,
		html: '',
		bakn:{},
		time:'获取验证码',
		list:[],
		bankstate:0
	})
	let shoplist = ref({})
	let goodslist = ref({})//商品
	let totalprice = ref(0)
	let freight = ref(0)
	let pluginShowing = ref(false)
	let is_pay_password = ref(false)
	let share=ref()
	onLoad((option) => {
		let datas = JSON.parse(option.item)
		shoplist.value = datas
		shoplist.value.num = option.num
		console.log(shoplist.value);
		// id.value = option.id
		form.value.id = datas.attribute_list[0].ID
		form.value.goods_id = datas.ID
		// paylist.value=uni.getStorageSync('payType')
		// #ifdef H5
		// for (let s of paylist.value) {
		// 	if(s.id==3){
		// 		s.show='0'
		// 	}
		// }
		// #endif
		getAddress()
	})
	onShow(() => {
	appContext.config.globalProperties.$request({
			url: `api/pay_bank/?page=1&size=50`,
			method: 'get',
			success(res) {
				data.list=res.data.data
				if(res.data.data.length>0){
					data.bakn=res.data.data[0]

					form.value.bank_id=res.data.data[0].ID
				}
			}
		})
		is_pay_password.value = uni.getStorageSync('userInfo').is_pay_password ? true : false
		uni.$on('selectAddress', (info) => { //开启监听全局的地址改变事件
			address.value = info
			uni.$off('selectAddress');
		})
	})

	onUnload(() => {
		uni.$off('selectAddress') //在此生命周期里销毁地址改变事件的监听
	})
	function myClick(order) {
		// #ifdef APP-PLUS
		module.cashierPaySingle(order, ret => {
		 if(ret.payType == '1'){
			wxPay(ret.tokenId)
		}else{
			if(ret.resultCode == '0000'){
			}
		 }
		})
		// #endif
		// #ifdef H5
		// window.location.href ='https://sandcash.mixienet.com.cn/pay/h5/alipay?'+ order
		// window.location.href ='https://sandcash.mixienet.com.cn/pay/h5/qrcode?'+ order
		uni.requestPayment({
			provider: 'alipay',
			orderInfo: orderStr, //支付宝订单数据
			success: function(res) {
				console.log('success:' + JSON.stringify(res));
			},
			fail: function(err) {
				console.log('fail:' + JSON.stringify(err));
			}
		});
		// #endif

	}
	function wxPay(tokenId){
		 plus.share.getServices(shareList => {
			 let sweixin = shareList.find(val => val.id == 'weixin')
			 if (sweixin) {
				 sweixin.launchMiniProgram({
					 id: 'gh_8f69bbed2867', //⼩程序原始id
					 path: 'pages/zf/index?token_id='+tokenId,
					 type:0 //正式版:0; 开发版:1; 体验版:2
				 })
			 } else {
				 uni.showToast({
					 icon: 'none',
					 title: "未安装微信,⽆法打开对应⼩程序"
				 })
			 }
		 }, e => {
			 uni.showToast({
				 icon: 'none',
				 title: "获取微信服务列表失败:" + JSON.stringify(e)
			 })
		 })
	}
	// 打开银行卡列表
	function binding(){
		share.value.open('bottom')
	}
	// 选取银行卡
	function selectBank(item){
		data.bakn=item
		form.value.bank_id=item.ID

		share.value.close()
	}
	function pay(i) {
		data.bankstate=i
		console.log(typeof(form.value.pay_type));
		if(String(form.value.pay_type) ==''){
			uni.showToast({
				icon: 'none',
				title: '请选择支付方式'
			})
			return
		}
		if (JSON.stringify(address.value) == '{}') {
			uni.showToast({
				icon: 'none',
				title: '请选择收货地址'
			})
			return
		}
		form.value.address = address.value.id
		if (form.value.pay_type == 0||form.value.pay_type == 5) {
			if (!is_pay_password.value) {
				uni.showModal({
					title: '您还没有设置支付密码',
					content: '去设置支付密码?',
					success: function(res) {
						if (res.confirm) {
							appContext.config.globalProperties.$goURl('/pages/personal/password/password?code=1')
						} else if (res.cancel) {
						}
					}
				})
				return
			}

			pluginShowing.value = true
			setTimeout(() => {
				pluginShowing.value = false
			}, 200)
		}
		if (form.value.pay_type == 3) {
			whenPwdReady('')
		}
		if (form.value.pay_type == 4) {
			whenPwdReady('')
		}
	}


	function getAddress() {
		appContext.config.globalProperties.$request({
			url: `api/address/?page=1&size=20&is_default=1`,
			method: 'get',
			success: (res) => {
				if (res.data.ID) {
					address.value = res.data
					address.value['id'] = res.data.ID
					form.value.address = res.data.ID
				} else {
					address.value = {}
				}
			}
		})
	}

	function radioChange(evt) {
		form.value.pay_type = Number(evt.detail.value)
	}

	// 密码支付 - 当密码填满时回调的函数
	function whenPwdReady(e) {
		if(form.value.pay_type != 4){
			form.value.bank_id=0
		}
		if(data.bankstate==0){
			form.value.sms_code=''
			form.value.mch_order_no=''
		}
		if(data.bankstate==1&&form.value.pay_type == 4){
			if(!form.value.bank_id){
				uni.showToast({
					icon: 'none',
					title:'请选择银行卡'
				})
				return
			}
			if(!form.value.sms_code){
				uni.showToast({
					icon: 'none',
					title:'请输入验证码'
				})
				return
			}
		}
		form.value.password = e
		form.value.pay_type = Number(form.value.pay_type)
		appContext.config.globalProperties.$request({
			url: `api/teamwork/initiateTeamwork/ `,
			method: 'post',
			data: form.value,
			success: (res) => {
				if (form.value.pay_type == 0||form.value.pay_type == 5) {
					pluginShowing.value = false
					if (res.errno == 0) {
						uni.showToast({
							icon: 'none',
							title: res.errmsg
						})
						setTimeout(() => {
							uni.navigateTo({
								url:'/pages/commodity/paymentGupo'
							})
						}, 1000)

					} else {
						uni.showToast({
							icon: 'none',
							title: res.errmsg
						})
					}
				} else if (form.value.pay_type == 3) {

					if(res.errno==0){
						// myClick(res.data)
						uni.requestPayment({
												provider: 'alipay',
												orderInfo: res.data, //支付宝订单数据
												success: function(resss) {
													// uni.showToast({
													// 	icon: 'none',
													// 	title:JSON.stringify(resss)
													// })
													uni.showToast({
														icon: 'none',
														title:'支付成功'
													})
													setTimeout(() => {
														appContext.config.globalProperties.$goURl('/pages/order/paymentresult')
													}, 1000)
												},
												fail: function(err) {
													uni.showToast({
														icon: 'none',
														title:'支付失败'
													})
												}
											});
						// if(res.data.rc_Result){
						// 	let indexs = 0
						// 	let listsss = res.data.rc_Result.split("'")
						// 	listsss.forEach((item, index) => {
						// 		if (item == '>location.href=') {
						// 			indexs = index + 1
						// 			console.log(indexs)
						// 		}
						// 	})
						// 	try {
						// 		window.location.href = listsss[indexs]
						// 	} catch (e) {
						// 		data.html = listsss[indexs]
						// 	}

						// 	setTimeout(() => {
						// 		data.html = ""
						// 		uni.switchTab({
						// 			url: '/pages/personal/index'
						// 		})
						// 	}, 2000)
						// }else{
						// 	uni.showToast({
						// 		icon:'none',
						// 		title:res.data.rb_CodeMsg
						// 	})
						// }
					}else{
						uni.showToast({
							icon: 'none',
							title: res.errmsg
						})
					}

					// uni.navigateTo({
					// 	url:'/pages/applet/webview?html='+res.data.rc_Result
					// })
				}else{
					uni.showToast({
						icon:'none',
						title:res.errmsg
					})
					if(res.errno==0&&data.bankstate==0){
						form.value.mch_order_no=res.data.id
						let times=60
						let timer=setInterval(function(){
							if(times==0){
								data.time='获取验证码'
								clearInterval(timer)
							}else{
								times--
								data.time=times+'S重发'
							}
						},1000)
					}else if(res.errno==0){
						uni.showLoading({
							title: '支付中'
						});
						let i=0
						let timer = setInterval(()=>{
						i++
						appContext.config.globalProperties.$request({
							url: `api/paymentQuery/?order=${id.value}`,
							method: 'get',
							success: (resData) => {
								if(i==3||resData.errno==0||resData.errno==1){
									uni.hideLoading();
									uni.showToast({
										icon:'none',
										title:resData.errmsg
									})
									if(resData.errno==0){
										setTimeout(() => {
											appContext.config.globalProperties.$goURl('/pages/order/paymentresult')
										}, 1000)
									}else{
										setTimeout(() => {
											uni.navigateBack()
										}, 1000)

									}
									clearInterval(timer)
								}
							}
						})

					},2000)

					}else{


					}
				}

			}
		})
	}
	function paymentQuery(){

	}
</script>


<style lang="scss" scoped>
	.container {
		.take {
			display: flex;
			background-color: #fff;
			border-bottom: 20upx solid #f5f5f5;

			.item {
				width: 50%;
				text-align: center;
				padding: 20upx;
			}

			.active {
				color: $color1;
			}
		}

		.header {
			background-color: #fff;
			padding: 30upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			background-image: url('https://img.fubaozx.cn/static/oldImg/1699501708457.png');
			background-repeat: no-repeat;
			background-size: 100% 10upx;
			background-position: bottom;

			.left {
				.address {
					font-size: 28upx;
					color: #333333;
				}

				.addressxx {
					font-size: 32upx;
					color: #333333;
					font-weight: bold;
					margin: 10upx 0;
				}

				.info {
					font-size: 24upx;
					color: #333333;
				}
			}
		}

		.goodsbox {
			margin: 30upx;
			padding: 30upx;
			border-radius: 30upx;
			background-color: #fff;

			.business {
				display: flex;
				align-items: center;
				font-size: 32upx;
				font-weight: bold;
				padding: 0 20upx 20upx 20upx;
				border-bottom: 1upx solid #f5f5f5;
				margin-bottom: 30upx;

				image {
					width: 60upx;
					height: 60upx;
					border-radius: 50%;
					margin-right: 10upx;
				}
			}

			.goods {
				display: flex;
				margin-bottom: 30upx;

				image {
					width: 200upx;
					height: 200upx;
					border-radius: 30upx;
					margin-right: 30upx;
					// background-color: aquamarine;
				}

				.right {
					width: calc(100% - 230upx);

					.name {
						color: #333333;
						font-size: 32upx;
						font-weight: bold;
					}

					.gg {
						color: #999999;
						font-size: 24upx;
						margin: 20upx 0;
					}

					.num {
						color: #999999;
						font-size: 24upx;
						display: flex;
						align-items: center;
					}
				}
			}

			.titlebox {
				display: flex;
				justify-content: space-between;
				color: #333333;
				margin: 30upx 0;

				.titleboxl {
					font-size: 28upx;
					font-weight: 500;
				}

				.titleboxr {
					font-size: 28upx;
					font-weight: bold;
				}

				.titlecolors {
					color: $color1;
				}

				.uni-input {
					font-size: 28upx;
					width: calc(100% - 150upx);
				}
			}

			.paylist {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 20upx 0;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 40upx;
						height: 40upx;
						margin-right: 20upx;
					}
				}

			}
		}

		.footer {
			position: fixed;
			background-color: #fff;
			bottom: 0;
			left: 0;
			right: 0;

			.time {
				color: #DE5B2A;
			}

			.foot {
				padding: 30upx;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;
				font-size: 32upx;

				.left {
					display: flex;

					.price {
						color: #FF0C2D;
						font-weight: bold;
					}
				}

				.right {
					color: #fff;
					background: linear-gradient(to right, #FF0C2D, #FF1E58);
					padding: 15upx 40upx;
					border-radius: 40upx;
					font-size: 28upx;
				}
			}
		}

	}
	.popupcontent{
		background-color: #f5f5f5;
		border-radius: 30upx 30upx 0 0;
		overflow: hidden;

		.btn{
			background-color: $color1;
			margin: 20upx;
			padding: 20upx;
			text-align: center;
			color: #fff;
			border-radius: 40upx;
		}
	}
	.backList{
		display: flex;
		align-items: center;
		background-color: #fff;
		justify-content: space-between;
		padding: 20upx;
		border-radius: 20upx;
		margin: 30upx;
		.backImg{
			width: 48rpx;
			height: 48rpx;
		}
		.backNames{
			margin-left: 6px;
			display: flex;
			align-items: center;
			.backName,.backId{
				font-size: 28rpx;
				font-family: PingFang SC, PingFang SC-Regular;
				font-weight: 400;
				text-align: left;
				color: #333333;
				margin: 0 10px;
			}
			.backName{
				margin-left: 10px;
			}
		}
		.backNamesm{
			margin: 0 6px;
			text{
				font-size: 16px;
				color: #333333;
			}
		}
		.selects{
			width: 14px;
			height: 15px;
		}
	}
		.sharep{
			width: 100%;
			margin: 30upx;
			.selectBank{
				width: 94%;
				margin: 0 auto;
				position: relative;
				text-align: center;
				padding: 15px 0;
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
				.selectMdd{
					color: #333333;
					font-size: 30upx;
					font-weight: 600;
				}
				.popupIcon{
					position: absolute;
					right: 0%;
					top: 10px;
				}
			}
			.information{
				padding: 10px;
				height: 300px;
				background-color: #f5f5f5;
				overflow-y: scroll;

				.BankList{
					background-color: #fff;
					padding: 15px;
					border-radius: 10upx;
					margin-bottom: 30upx;
					.nameAndBankName{
						margin-bottom: 4px;
						color: #333;
						.name{
							margin-right: 10px;
						}
					}
					.bankAddress{
						color: #333;
						.address{
							margin-right: 10px;
						}
					}
				}
			}
		}
		.itembox{
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: #fff;
			padding: 20upx;
			border-radius: 20upx;
			font-size: 14px;
			margin: 30upx;
			.label{
				width: 30%;
			}
			.input{
				width: 70%;
				justify-content: space-between;
			}
		}
</style>
